<template>
	<view class="content">
		<view class="header">
			<view class="servicetype">
				<view class="serviceitem "  :class="sindex==1?'selectservice':''"    @click="translateService(1)">
					<text>堂食</text>
				</view>
				<view class="serviceitem" :class="sindex==2?'selectservice':''"    @click="translateService(2)">
					<text>外卖</text>
				</view>
				<view class="serviceitem" :class="sindex==3?'selectservice':''"    @click="translateService(3)">
					<text>排队</text>
				</view>
			</view>
			<view class="ordertype" v-if="sindex<3">
				<view class="ordertypeitem " @click="selectorderstatus(1)">
					<text class="selectcolor">全部</text>
					<view class="selectorder">
					</view>
				</view>
				<view class="ordertypeitem" @click="selectorderstatus(2)">
					<text>待付款</text>
					<view class="nscselectorder">
						</view>
				</view>
				<view class="ordertypeitem" @click="selectorderstatus(3)">
					<text>已退款</text>
					<view class="nscselectorder">
					</view>
				</view>
			</view>
			<view class="waitingstation" v-if="sindex>2">
				<view class="waitingitem">
					<text class="selectcolor">当前</text>
					<view class="selectorder">
					</view>
				</view>
				<view class="waitingitem">
					<text>历史</text>
				</view>
			</view>
		</view>
		
		

		<view class="cate_body">
			<view class="cell">
				<view class="cell_top">
					<text class="cell_top_t1">牛肉馆</text>
					<text class="cell_top_t2">等待付款</text>
				</view>
				<view class="cell_center">
					<view class="cell_pic">
						<image src="../../static/header.png" mode="scaleToFill"></image>
					</view>
					<text class="cell_num">共1件商品</text>
				</view>
				<view class="cell_bottom">
					<view class="cell_bott_l">
						<text class="celbt1">总计</text>
						<text class="celbt2">100</text>
					</view>
					<view class="cell_bott_r">
						立即付款
					</view>
				</view>
			</view>
		</view>


	</view>
</template>



<script>
	export default {
		data() {
			return {
				listArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, '更多'],
				sindex:1,     //订单类型索引
				tindex:1,  //订单状态索引
			}
		},
		methods:{
			translateService(e){
				this.sindex = e;	
			},
			selectorderstatus(e){
				this.tindex = e;
			}
		}
	}
</script>
<style>
@import '../../common/cate.css';
</style>
